<template>
    <!-- 角色表单弹窗 -->
    <el-dialog
        v-model="dialog.visible"
        :title="dialog.title"
        width="500px"
        @close="closeDialogCallback"
    >
        <el-form
            ref="roleFormRef"
            :model="formDataRef"
            :rules="rules"
            label-width="100px"
        >
            <el-form-item label="角色名称" prop="name">
                <el-input
                    v-model="formDataRef.name"
                    placeholder="请输入角色名称"
                />
            </el-form-item>

            <el-form-item label="角色编码" prop="code">
                <el-input
                    v-model="formDataRef.code"
                    placeholder="请输入角色编码"
                />
            </el-form-item>

            <el-form-item label="数据权限" prop="dataScope">
                <el-select v-model="formDataRef.dataScope">
                    <el-option :key="0" label="全部数据" :value="0" />
                    <el-option :key="1" label="部门及子部门数据" :value="1" />
                    <el-option :key="2" label="本部门数据" :value="2" />
                    <el-option :key="3" label="本人数据" :value="3" />
                </el-select>
            </el-form-item>

            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="formDataRef.status">
                    <el-radio :label="1">正常</el-radio>
                    <el-radio :label="0">停用</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="排序" prop="sort">
                <el-input-number
                    v-model="formDataRef.sort"
                    controls-position="right"
                    :min="0"
                    style="width: 100px"
                />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="handleSubmit"
                    >确 定</el-button
                >
                <el-button @click="closeDialog">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { TypeRoleFormI } from "@/api/role/role_types";
import { ElMessage, FormInstance } from "element-plus";
import { reactive, ref } from "vue";
import * as roleApi from '@/api/role/role_api_index'
import {$bus} from '@/event_bus/event_bus_index'

////#region defineXxx
//defineOptions({
//name:
//});

//const props=defineProps({
//propA:{
//type:String,
//required:true
//},
//propB:{
//type:Number,
//default:1
//},
//propC:{
//type:String as PropType<MyType>,
//required:true
//},
//});

//const emit = defineEmits<{
//event1:[para1:number,para2:string],
//event2:[para1:number,para2:string],
//}>();
////#endregion

const dialog = reactive({
    visible: false,
    title: "角色信息新增/更新",
    width: 800,
});
const loading = ref(false);

let roleId: number | undefined

const formDataInit={
    sort: 1,
    status: 1,
    code: "",
    name: "",
    id:undefined
}

const formDataRef = ref<TypeRoleFormI>(Object.assign({},formDataInit));

const rules = reactive({
  name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
  code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
  dataScope: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
  status: [{ required: true, message: "请选择状态", trigger: "blur" }],
});


const roleFormRef = ref<FormInstance>() // 用户表单
const openDialog = (roleIdParam?: number) => {
    dialog.visible = true;
    roleId=roleIdParam;
    if (roleId) {
        dialog.title = "修改角色";
        roleApi.getRoleForm(roleId).then(({ data }) => {
        Object.assign(formDataRef.value, data);
        });
    } else {
        dialog.title = "新增角色";
    }
}

/** 角色保存提交 */
function handleSubmit() {
  roleFormRef.value?.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      const roleId = formDataRef.value.id;
      if (roleId) {
        roleApi.updateRole(roleId, formDataRef.value)
          .then(() => {
            ElMessage.success("修改成功");
            closeDialog();
            
          })
          .finally(() => (loading.value = false));
      } else {
            roleApi.addRole(formDataRef.value)
          .then(() => {
            ElMessage.success("新增成功");
            closeDialog();
            
          })
          .finally(() => (loading.value = false));
      }
    }
  });
}

/** 关闭表单弹窗 */
function closeDialog() {
  dialog.visible = false;
}

function closeDialogCallback(){
    roleFormRef.value?.resetFields();
    roleFormRef.value?.clearValidate();
    formDataRef.value=Object.assign({},formDataInit);
    $bus.emit('role-reset-and-query');
}

defineExpose({
    openDialog,
})

</script>
<style lang="scss" scoped></style>
